<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Form Layout</title>

	<script type="text/javascript" src="../../deviceTheme.js" data-dojo-config="'dojo-bidi': true"></script>
	<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="async: true, parseOnLoad: true, has:{'dojo-bidi': true}"></script>

	<script type="text/javascript">
		require([
			"dojox/mobile",
			"dojo/parser",
			"dojox/mobile/compat",
			"dojox/mobile/Button",
			"dojox/mobile/CheckBox",
			"dojox/mobile/ComboBox",
			"dojox/mobile/RadioButton",
			"dojox/mobile/Slider",
			"dojox/mobile/TextBox",
			"dojox/mobile/SearchBox",
			"dojox/mobile/ExpandingTextArea",
			"dojox/mobile/ToggleButton",
			"dojox/mobile/FormLayout"
		]);

		myOnSearch = function(results, query, options){
			if(results.length){
				console.log('first paged result ' + (options.start + 1) + ' of ' + results.total + ': label = ' + results[0].name + ', value = ' + results[0].value);
				console.log('last paged result ' + (options.start + results.length) + ' of ' + results.total + ': label = ' + results[results.length - 1].name + ', value = ' + results[results.length - 1].value);
			}else if(results.total == 0){
				console.log('no matching results');
			}
			if((options.start + results.length) < results.total){
				results.nextPage();
			}
		};
	</script>
</head>
<body style="visibility:hidden;">
<datalist>
	<select data-dojo-type="dijit.form.DataList" data-dojo-props='id:"states"'>
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AS">American Samoa</option>
		<option value="AZ">Arizona</option>
		<option value="AR">Arkansas</option>
		<option value="AE">Armed Forces Europe</option>
		<option value="AP">Armed Forces Pacific</option>
		<option value="AA">Armed Forces the Americas</option>
		<option value="CA">California</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="DC">District of Columbia</option>
		<option value="FM">Federated States of Micronesia</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="GU">Guam</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="IL">Illinois</option>
		<option value="IN">Indiana</option>
		<option value="IA">Iowa</option>
		<option value="KS">Kansas</option>
		<option value="KY">Kentucky</option>
		<option value="LA">Louisiana</option>
		<option value="ME">Maine</option>
		<option value="MH">Marshall Islands</option>
		<option value="MD">Maryland</option>
		<option value="MA">Massachusetts</option>
		<option value="MI">Michigan</option>
		<option value="MN">Minnesota</option>
		<option value="MS">Mississippi</option>
		<option value="MO">Missouri</option>
		<option value="MT">Montana</option>
		<option value="NE">Nebraska</option>
		<option value="NV">Nevada</option>
		<option value="NH">New Hampshire</option>
		<option value="NJ">New Jersey</option>
		<option value="NM">New Mexico</option>
		<option value="NY">New York</option>
		<option value="NC">North Carolina</option>
		<option value="ND">North Dakota</option>
		<option value="MP">Northern Mariana Islands</option>
		<option value="OH">Ohio</option>
		<option value="OK">Oklahoma</option>
		<option value="OR">Oregon</option>
		<option value="PA">Pennsylvania</option>
		<option value="PR">Puerto Rico</option>
		<option value="RI">Rhode Island</option>
		<option value="SC">South Carolina</option>
		<option value="SD">South Dakota</option>
		<option value="TN">Tennessee</option>
		<option value="TX">Texas</option>
		<option value="UT">Utah</option>
		<option value="VT">Vermont</option>
		<option value="VI">Virgin Islands, U.S.</option>
		<option value="VA">Virginia</option>
		<option value="WA">Washington</option>
		<option value="WV">West Virginia</option>
		<option value="WI">Wisconsin</option>
		<option value="WY">Wyoming</option>
	</select>
</datalist>

<div data-dojo-type="dojox.mobile.View">
	<h1 data-dojo-type="dojox.mobile.Heading">Form Layout</h1>

	<div data-dojo-type="dojox.mobile.RoundRect">
		<div data-dojo-type="dojox.mobile.FormLayout" data-dojo-props="rightAlign: false, columns:'single'" dir="rtl">
			<div>
				<label>Buttons</label>
				<fieldset>
					<button data-dojo-type="dojox.mobile.Button">Help</button>
					<input type="submit" class="mblBlueButton" data-dojo-type="dojox.mobile.Button" value="Submit">
					<button class="mblRedButton" data-dojo-type="dojox.mobile.Button">Cancel</button>
				</fieldset>
			</div>
			<div>
				<label>Checkbox</label>
				<fieldset><input type="checkbox" data-dojo-type="dojox.mobile.CheckBox"><label>Click me</label>
				</fieldset>
			</div>
			<div>
				<label>Toggle Button</label>
				<fieldset>
					<button data-dojo-type="dojox.mobile.ToggleButton">Toggle me</button>
				</fieldset>
			</div>
			<div>
				<label>Switch</label>
				<fieldset><input type="checkbox" data-dojo-type="dojox.mobile.Switch" value="on"></fieldset>
			</div>
			<div>
				<label>Radio Button</label>
				<fieldset>
					<input type="radio" id="rb1" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Large" checked><label for="rb1">1</label>
					<input type="radio" id="rb2" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Medium"><label for="rb2">2</label>
					<input type="radio" id="rb3" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Small"><label for="rb3">3</label>
				</fieldset>
			</div>
			<div>
				<label>Slider</label>
				<fieldset><input id="sh" name="shb" data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20"
								 step="0.1" type="range" style="width:150px;"></fieldset>
			</div>
			<div>
				<label>ComboBox</label>
				<fieldset><input type="text" data-dojo-type="dojox.mobile.ComboBox"
								 data-dojo-props='value:"", list:"states"'></fieldset>
			</div>
			<div>
				<label>TextArea</span></label>
				<fieldset>
					<textarea data-dojo-type="dojox.mobile.TextArea" rows="3" cols="20">TextArea</textarea><br>
					<textarea data-dojo-type="dojox.mobile.ExpandingTextArea" rows="3"
							  cols="20">ExpandingTextArea</textarea>
				</fieldset>
			</div>
			<div>
				<label>TextBox</label>
				<fieldset><input data-dojo-type="dojox.mobile.TextBox" intermediateChanges="true" maxLength="9"
								 selectOnClick="true" placeHolder="max 9 chars"
								 onChange="console.log('onChange fired with ' + arguments[0])"></fieldset>
			</div>
			<div>
				<label>SearchBox</span></label>
				<fieldset><input data-dojo-type="dojox.mobile.SearchBox" type="search" selectOnClick="true"
								 placeHolder="Search" data-dojo-props='list:"states", pageSize:5, onSearch:myOnSearch'>
				</fieldset>
			</div>
		</div>
	</div>
	<div data-dojo-type="dojox.mobile.RoundRect">
		<div data-dojo-type="dojox.mobile.FormLayout" data-dojo-props="rightAlign: true" dir="rtl">
			<div>
				<label>Button</label>
				<fieldset>
					<button data-dojo-type="dojox.mobile.Button">Help</button>
					<input type="submit" class="mblBlueButton" data-dojo-type="dojox.mobile.Button" value="Submit">
					<button class="mblRedButton" data-dojo-type="dojox.mobile.Button">Cancel</button>
				</fieldset>
			</div>
			<div>
				<label>Checkbox</label>
				<fieldset><input type="checkbox" data-dojo-type="dojox.mobile.CheckBox"><label>Click me</label>
				</fieldset>
			</div>
			<div>
				<label>Toggle Button</label>
				<fieldset>
					<button data-dojo-type="dojox.mobile.ToggleButton">Toggle me</button>
				</fieldset>
			</div>
			<div>
				<label>Switch</label>
				<fieldset><input type="checkbox" data-dojo-type="dojox.mobile.Switch" value="on"></fieldset>
			</div>
			<div>
				<label>Radio Button</label>
				<fieldset>
					<input type="radio" id="rb1b" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Large" checked><label for="rb1b">1</label>
					<input type="radio" id="rb2b" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Medium"><label for="rb2b">2</label>
					<input type="radio" id="rb3b" data-dojo-type="dojox.mobile.RadioButton" name="mobileRadio"
						   value="Small"><label for="rb3b">3</label>
				</fieldset>
			</div>
			<div>
				<label>Slider</label>
				<fieldset><input id="shb" name="shb" data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20"
								 step="0.1" type="range" style="width:150px;"></fieldset>
			</div>
			<div>
				<label>ComboBox</label>
				<fieldset><input type="text" data-dojo-type="dojox.mobile.ComboBox"
								 data-dojo-props='value:"", list:"states"'></fieldset>
			</div>
			<div>
				<label>TextArea</span></label>
				<fieldset>
					<textarea data-dojo-type="dojox.mobile.TextArea" style="margin-right: 0" rows="3"
							  cols="20">TextArea</textarea><br>
					<textarea data-dojo-type="dojox.mobile.ExpandingTextArea" rows="3"
							  cols="20">ExpandingTextArea</textarea>
				</fieldset>
			</div>
			<div>
				<label>TextBox</label>
				<fieldset><input type="text" data-dojo-type="dojox.mobile.TextBox" intermediateChanges="true"
								 maxLength="9" selectOnClick="true" placeHolder="max 9 chars"
								 onChange="console.log('onChange fired with ' + arguments[0])"></fieldset>
			</div>
			<div>
				<label>SearchBox</span></label>
				<fieldset><input data-dojo-type="dojox.mobile.SearchBox" type="search" selectOnClick="true"
								 placeHolder="Search" data-dojo-props='list:"states", pageSize:5, onSearch:myOnSearch'>
				</fieldset>
			</div>
		</div>
	</div>
</div>
</body>
</html>
